<template>
  <div v-loading="loading" class="order-upload">
    <el-upload
      ref="elUpload"
      :multiple="true"
      :show-file-list="false"
      :http-request="uploadFileMethod"
      :before-upload="beforeUpload"
      :disabled="isDisabled"
      :accept="accept"
      drag
      action
    >
      <slot name="upload-body">
        <div class="file-uploader">
          <img src="../../assets/orderlist/upload.png" alt="">
          <div class="upload-text">点击或将文件拖拽到这里上传</div>
          <div class="upload-tip">支持扩展名：.xlsx/.xls</div>
        </div>
      </slot>
    </el-upload>
  </div>
</template>
<script>
import ImportList from './mixins/importList';
import ImportIcon from '@/assets/medium/import.png';
// import { debounce } from '@/utils';
export default {
  name: 'ImportButton',
  mixins: [ImportList],
  props: {
    // 按钮文字
    btnText: {
      type: String,
      default: '导入excel'
    },
    // 控制是否显示成功和失败提示框
    hideConfirm: {
      type: Boolean,
      default: false
    },
    // 是否可以点击
    isDisabled: {
      type: Boolean,
      default: false
    },
    importApi: {
      type: String,
      default: () => {
        return '';
      }
    },
    accept: {
      type: String,
      default: '.xls, .xlsx'
    },
    uploadVerify: { // 是否开启文件上传后缀校验
      type: Boolean,
      default: false
    },
    isImportEdit: {// 是否为导入编辑
      type: Boolean,
      default: false
    },
    extendParams: { // 传给接口额外的参数
      type: Object,
      default: () => ({})
    },
    customError: { // 手动处理错误信息
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ImportIcon,
      isSealing: false,
      limitNum: false
    };
  },
  methods: {
    // 筛选条件
    getList() {
      this.$emit('getList', false);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.order-upload {
  ::v-deep {
    .el-upload {
      height: 160px;
      width: 100%;
      .el-upload-dragger {
        width: 100%;
        height: 160px;
        background-color: #fafafa;
      }
    }
  }
  .upload-text {
    font-size:16px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:1.2;
    margin-top: 12px;
  }
   .upload-tip {
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:14px;
      margin-top: 12px;
   }
   .file-uploader {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: centers;
     text-align: center;
     img {
       width: 40px;
       height: 40px;
       display: block;
       margin: 0 auto;
     }
   }
}
</style>
